<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>国际象棋</title>
  </head>

  <body>
    <div id="box"></div>

    <div style="text-align: center">{{ AppName }} / {{AppVersion}}</div>

    <style>
      body {
        background-color: bisque;
      }

      #app {
        display: flex;
      }

      #box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        background-image: url('{{_res}}/html/img/国际象棋背景.svg');
        background-size: cover;
      }

      #box .lattice {
        width: 96px;
        height: 96px;
        margin: 1px;
        background-size: cover;
      }

      .latticebox {
        width: 100%;
        height: 100%;
        background-size: cover;
      }

      .b {
        background-image: url('{{_res}}/html/img/b_box.svg');
      }

      .w {
        background-image: url('{{_res}}/html/img/w_box.png');
      }
    </style>

    <script>
      let box = document.getElementById('box')
      let data_box = [] // 棋子数据

      const img = {
        width: {
          兵: '',
          王: '',
          后: '',
          象: '',
          车: '',
          马: ''
        },
        black: {
          兵: '',
          王: '',
          后: '',
          象: '',
          车: '',
          马: ''
        },
        空: ''
      }

      let map = '{{map}}' // 地图
      map = map.split(',')
      let archive = '{{archive}}' // 双方棋子标记
      archive = archive.split(',')
      let ss = '{{ss}}' // 移动轨迹地图
      ss = ss.split(',')

      map.forEach((e, index) => {
        if (e !== '空' && archive[index] == '黑') {
          // 玩家A，黑棋
          if (ss[index] == '黑box') {
            data_box.push(
              `<div class="lattice" style="background-image: url('${img.black[e]}')"><div class="b latticebox"></div></div>`
            )
          } else {
            data_box.push(
              `<div class="lattice" style="background-image: url('${img.black[e]}')"></div>`
            )
          }
        }
        if (e !== '空' && archive[index] == '白') {
          // 玩家A，黑棋
          if (ss[index] == '白box') {
            data_box.push(
              `<div class="lattice" style="background-image: url('${img.width[e]}')"><div class="w latticebox"></div></div>`
            )
          } else {
            data_box.push(
              `<div class="lattice" style="background-image: url('${img.width[e]}')"></div>`
            )
          }
        }
        if (e === '空') {
          if (ss[index] == '黑box') {
            data_box.push(
              `<div class="lattice"><div class="b latticebox"></div></div>`
            )
          } else if (ss[index] == '白box') {
            data_box.push(
              `<div class="lattice"><div class="w latticebox"></div></div>`
            )
          } else {
            data_box.push(`<div class="lattice"></div>`)
          }
        }
      })

      box.innerHTML = data_box.join('')
    </script>
  </body>
</html>
